<html>
  <head>
    <title>Protovis Graph</title>
    <script type="text/javascript" src="../../web_code/protovis/protovis-3.2/protovis-r3.2.js"></script>
    <script type="text/javascript">
        var data = %s; //Substituted by Python
    </script>
  </head>
  <body>
    <script type="text/javascript+protovis">

        var w = document.body.clientWidth,
            h = document.body.clientHeight,
            colors = pv.Colors.category19();

        var vis = new pv.Panel()
            .width(w)
            .height(h)
            .fillStyle("white")
            .event("mousedown", pv.Behavior.pan())
            .event("mousewheel", pv.Behavior.zoom());

        // See http://vis.stanford.edu/protovis/jsdoc/symbols/pv.Layout.Force.html
        // for parameters that affect the forces that drive the layout
        var force = vis.add(pv.Layout.Force)
            .chargeConstant(-400)
            .chargeMinDistance(10)
            .springLength(50)
            .nodes(data.nodes)
            .links(data.links);

        force.link.add(pv.Line);

        force.node.add(pv.Dot)
            .size(function(d) (d.linkDegree*10 + 100) * Math.pow(this.scale, -1.5))
            .fillStyle(function(d) d.fix ? "brown" : colors(d.group))
            .strokeStyle(function() this.fillStyle().darker())
            .lineWidth(1)
            .title(function(d) d.nodeName)
            .text(function(d) d.nodeName)
            .event("mousedown", pv.Behavior.drag())
            .event("drag", force)
            .add(pv.Label)
            .text(function(d) d.nodeName);

        vis.render();

    </script>
  </body>
</html>
